<template>
  <div class="pbox">
    <Box title="煤炭产量">
      <template #topRight>
        <div class="rightBtn">
          <BaseButton
            v-for="item in btnArr"
            :checked="item.checked"
            @click="btnFn(item)"
            >{{ item.text }}</BaseButton
          >
        </div>
      </template>
      <div class="contentBox">
        <div class="top">
          <div class="topBox topBoxBak"></div>
          <div class="topBox">
            <div>计划</div>
            <div class="fontNum">
              {{ info.jihua }}<span class="danwei">万吨</span>
            </div>
          </div>
          <div class="topBox">
            <div>实际</div>
            <div class="fontNum">
              {{ info.shiji }}<span class="danwei">万吨</span>
            </div>
          </div>
          <div class="topBox">
            <div>进度</div>
            <div class="fontNum">
              {{ info.jindu }}<span class="danwei">%</span>
            </div>
          </div>
          <div class="topBox topLastBox">
            <div>
              同比<span class="fontRed">{{ info.tb1 }}%</span>
            </div>
            <div>
              同比<span class="fontGreen">{{ info.tb2 }}%</span>
            </div>
          </div>
        </div>

        <div class="charts">
          <myCharts :option="option"></myCharts>
        </div>
      </div>
    </Box>
  </div>
</template>
<script setup>
import Box from "@/components/Box/index.vue";
import BaseButton from "@/components/Button/index.vue";
import { reactive, onMounted, ref, onUnmounted } from "vue";
import * as echarts from "echarts";
import myCharts from "@/components/Echart/index.vue";
import { getMTCL } from "@/api/home";
const sourceData = ref([]);
onMounted(() => {
  getMTCL().then((e) => {

    sourceData.value = e.data;
    option.series[0].data = e.data[0].chart[0].data;
    option.series[1].data = e.data[0].chart[1].data;
    info.value = e.data[0].info;
  });
});

const info = ref({ jihua: 0, shiji: 0, jindu: 0, tb1: 0, tb2: 0 });
const btnArr = reactive([
  {
    text: "日",
    checked: true,
  },
  {
    text: "月",
    checked: false,
  },
  {
    text: "年",
    checked: false,
  },
]);

function btnFn(item) {
  // 将其他按钮设置成false
  btnArr.forEach((element) => {
    element.checked = false;
  });
  item.checked = true;
  for (let i = 0; i < sourceData.value.length; i++) {
    if (sourceData.value[i].type === item.text) {
      option.series[0].data = sourceData.value[i].chart[0].data;
      option.series[1].data = sourceData.value[i].chart[1].data;
      info.value = sourceData.value[i].info;
      break
    }
  }
}
// echart 图表配置
const option = reactive({
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(0, 255, 233,0)",
            },
            {
              offset: 0.5,
              color: "rgba(255, 255, 255,1)",
            },
            {
              offset: 1,
              color: "rgba(0, 255, 233,0)",
            },
          ],
          global: false,
        },
      },
    },
  },

  legend: {
    show: true,
    right: 15,
    textStyle: {
      color: "#fff",
    },
  },
  grid: {
    top: "20%",
    left: "10%",
    right: "5%",
    bottom: "15%",
    // containLabel: true
  },
  xAxis: [
    {
      type: "category",
      axisLine: {
        show: true,
      },
      splitArea: {
        // show: true,
        color: "#f00",
        lineStyle: {
          color: "#f00",
        },
      },
      axisLabel: {
        color: "#fff",
      },
      splitLine: {
        show: false,
      },
      boundaryGap: false,
      data: [1, 3, 5, 7, 9, 11, 13, 15, 17, 19],
    },
  ],

  yAxis: [
    {
      type: "value",
      min: 0,
      name: "单位/万吨",
      // max: 140,
      splitNumber: 4,
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(255,255,255,0.1)",
        },
      },
      axisLine: {
        show: true,
      },
      axisLabel: {
        show: true,
        margin: 20,
        textStyle: {
          color: "#FFF",
        },
      },
      nameTextStyle: {
        color: "#ffffff",
      },
      axisTick: {
        show: true,
      },
    },
  ],
  series: [
    {
      name: "计划",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: "circle",
      symbolSize: 3,
      lineStyle: {
        normal: {
          color: "#00b3f4",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
      },
      label: {
        show: false,
        position: "top",
        textStyle: {
          color: "#00b3f4",
        },
      },
      itemStyle: {
        color: "#00b3f4",
        borderColor: "#fff",
        borderWidth: 3,
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,179,244,0.3)",
              },
              {
                offset: 1,
                color: "rgba(0,179,244,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,179,244, 0.9)",
          shadowBlur: 20,
        },
      },
      data: [4, 4, 4, 4, 4, 4, 4, 4, 4, 4],
    },
    {
      name: "实际",
      type: "line",
      smooth: true, //是否平滑
      showAllSymbol: true,
      // symbol: 'image://./static/images/guang-circle.png',
      symbol: "circle",
      symbolSize: 3,
      lineStyle: {
        normal: {
          color: "#00ca95",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
      },
      label: {
        show: false,
        position: "top",
        textStyle: {
          color: "#00ca95",
        },
      },

      itemStyle: {
        color: "#00ca95",
        borderColor: "#fff",
        borderWidth: 3,
        shadowColor: "rgba(0, 0, 0, .3)",
        shadowBlur: 0,
        shadowOffsetY: 2,
        shadowOffsetX: 2,
      },
      tooltip: {
        show: true,
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)",
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20,
        },
      },
      data: [6, 7, 8, 9, 8, 7, 6, 5, 7, 6],
    },
  ],
});
</script>
<style scoped>
.pbox {
  width: 100%;
  height: 35%;
  font-family: Arial, Helvetica, sans-serif;
}
.rightBtn {
  display: flex;
  gap: 10px;
}
.contentBox {
  width: 100%;
  height: 100%;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: Arial, Helvetica, sans-serif;
  height: 50px;
}
.topBox {
  flex: 1;
  height: 100%;
  display: flex;
  align-items: anchor-center;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.topBoxBak {
  background-image: url("/layout/che.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  /*
    background-size: contain; 是 CSS 中用于控制背景图像大小的属性值，它会将背景图像缩放至尽可能大的尺寸，同时确保图像的宽度和高度都能完整显示在容器元素内。
    */
}
.danwei {
  font-size: 8px;
}
.fontNum {
  font-size: 24px;
  font-family: Arial, Helvetica, sans-serif;
}
.fontRed {
  color: red;
}
.fontGreen {
  color: green;
}
.topLastBox {
  /* align-items: flex-end; */
}
.charts {
  width: 100%;
  height: calc(100% - 50px);
}
</style>
